<template>
  <el-menu
    :default-active="activeMenu"
    mode="horizontal"
    @select="handleSelect"
  >
    <template v-for="(item, index) in topMenus">
      <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber"
      ><svg-icon :icon-class="item.meta.icon" />
        {{ item.meta.title }}</el-menu-item
      >
    </template>

    <!-- 顶部菜单超出数量折叠 -->
    <el-submenu index="more" v-if="topMenus.length > visibleNumber">
      <template slot="title">更多菜单</template>
      <template v-for="(item, index) in topMenus">
        <el-menu-item
          :index="item.path"
          :key="index"
          v-if="index >= visibleNumber"
        ><svg-icon :icon-class="item.meta.icon" />
          {{ item.meta.title }}</el-menu-item
        >
      </template>
    </el-submenu>
  </el-menu>
</template>

<script>
  import { constantRoutes } from "@/router";

  export default {
    data() {
      return {
        // 顶部栏初始数
        visibleNumber: 5,
        // 是否为首次加载
        isFrist: false,
        // 当前激活菜单的 index
        currentIndex: undefined
      };
    },
    computed: {
      theme() {
        return this.$store.state.settings.theme;
      },
      // 顶部显示菜单
      topMenus() {
        let topMenus = [];
        this.routers.map((menu) => {
          if (menu.hidden !== true) {
            // 兼容顶部栏一级菜单内部跳转
            if (menu.path === "/") {
              topMenus.push(menu.children[0]);
            } else {
              topMenus.push(menu);
            }
          }
        });
        return topMenus;
      },
      // 所有的路由信息
      routers() {
        return this.$store.state.permission.topbarRouters;
      },
      // 设置子路由
      childrenMenus() {
        var childrenMenus = [];
        this.routers.map((router) => {
          for (var item in router.children) {
            if (router.children[item].parentPath === undefined) {
              if(router.path === "/") {
                router.children[item].path = "/redirect/" + router.children[item].path;
              } else {
                if(!this.ishttp(router.children[item].path)) {
                  router.children[item].path = router.path + "/" + router.children[item].path;
                }
              }
              router.children[item].parentPath = router.path;
            }
            childrenMenus.push(router.children[item]);
          }
        });
        return constantRoutes.concat(childrenMenus);
      },
      // 默认激活的菜单
      activeMenu() {
        const path = this.$route.path;
        let activePath = this.routers[0].path;
        if (path.lastIndexOf("/") > 0) {
          const tmpPath = path.substring(1, path.length);
          activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"));
        } else if ("/index" == path || "" == path) {
          if (!this.isFrist) {
            this.isFrist = true;
          } else {
            activePath = "index";
          }
        }
        var routes = this.activeRoutes(activePath);
        if (routes.length === 0) {
          activePath = this.currentIndex || this.routers[0].path
          this.activeRoutes(activePath);
        }
        return activePath;
      },
    },
    beforeMount() {
      window.addEventListener('resize', this.setVisibleNumber)
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.setVisibleNumber)
    },
    mounted() {
      this.setVisibleNumber();
    },
    methods: {
      // 根据宽度计算设置显示栏数
      setVisibleNumber() {
        const width = document.body.getBoundingClientRect().width / 3;
        this.visibleNumber = parseInt(width / 85);
      },
      // 菜单选择事件
      handleSelect(key, keyPath) {
        this.currentIndex = key;
        if (this.ishttp(key)) {
          // http(s):// 路径新窗口打开
          window.open(key, "_blank");
        } else if (key.indexOf("/redirect") !== -1) {
          // /redirect 路径内部打开
          this.$router.push({ path: key.replace("/redirect", "") });
        } else {
          // 显示左侧联动菜单
          this.activeRoutes(key);
        }
      },
      // 当前激活的路由
      activeRoutes(key) {
        var routes = [];
        if (this.childrenMenus && this.childrenMenus.length > 0) {
          this.childrenMenus.map((item) => {
            if (key == item.parentPath || (key == "index" && "" == item.path)) {
              routes.push(item);
            }
          });
        }
        if(routes.length > 0) {
          this.$store.commit("SET_SIDEBAR_ROUTERS", routes);
        }
        return routes;
      },
      ishttp(url) {
        return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
      }
    },
  };
</script>

<style lang="scss">
  .el-menu--horizontal > .el-menu-item {
    float: left;
    height: 50px;
    line-height: 50px;
    margin: 0;
    border-bottom: 3px solid transparent;
    color: #999093;
    padding: 0 5px;
    margin: 0 10px;
  }

  .el-menu--horizontal > .el-menu-item.is-active {
    border-bottom: 3px solid #{'var(--theme)'};
    color: #303133;
  }

  /* submenu item */
  .el-menu--horizontal > .el-submenu .el-submenu__title {
    height: 50px !important;
    line-height: 50px !important;
  }
</style>
